<template>
<div class="message-box" v-show="isShowMessageBox">
	<div class="mask"></div>
	<div class="message-content">
		<div class="mess-top">
			<h3 class="title">{{ title }}</h3>
			<p class="content">{{ content }}</p>
			<div>
				<input 
					type="text" 
					v-model="inputValue" 
					v-if="isShowInput" 
					ref="input" 
					:placeholder="placeholder"
					@keyup.enter="confirm">
			</div>			
		</div>
		<div class="btn-group">
			<p
				class="btn-default" 
				@click="cancel" 
				v-show="isShowCancelBtn"
				>{{ cancelBtnText }}</p>
			<p 
				class="btn-primary btn-confirm" 
				@click="confirm" 
				v-show="isShowConfimrBtn"
				>{{ confirmBtnText }}</p>
		</div>
	</div>
</div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: '这是弹框内容'
    },
		placeholder: {
			type: String,
			default: '输入内容'
		},
    isShowInput: false,
    inputValue: '',
    isShowCancelBtn: {
      type: Boolean,
      default: true
    },
    isShowConfimrBtn: {
      type: Boolean,
      default: true
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    },
    confirmBtnText: {
      type: String,
      default: '确定'
    }
  },
  data () {
    return {
      isShowMessageBox: false,
      resolve: '',
      reject: '',
      promise: '' // 保存promise对象
    };
  },
  methods: {
    // 确定,将promise断定为resolve状态
    confirm: function () {
      this.isShowMessageBox = false;
			this.unset();
      if (this.isShowInput) {
        this.resolve(this.inputValue);
      } else {
        this.resolve('confirm');
      }
      this.remove();
    },
    // 取消,将promise断定为reject状态
    cancel: function () {
			this.unset();
      this.isShowMessageBox = false;
      this.reject('cancel');
      this.remove();
    },
    // 弹出messageBox,并创建promise对象
    showMsgBox: function () {
      this.isShowMessageBox = true;
			this.hidden();
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
      // 返回promise对象
      return this.promise;
    },
    remove: function () {
      setTimeout(() => {
        this.destroy();
      }, 300);
    },
    destroy: function () {
      this.$destroy();
      document.body.removeChild(this.$el);
    },
		// 禁止页面滚动
		hidden: function () {
			// document.body.style.height = '100vh'
			// document.body.style['overflow-y'] = 'hidden'
		},
		// 允许页面滚动
		unset: function () {
			document.body.style.height = 'unset'
			document.body.style['overflow-y'] = 'auto'
		}
  }
};
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.message-box {
  position: relative;
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5000;
		background-color: rgba(0,0,0,.6);
	}
  .message-content {
    position: fixed;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: rem(20);
    background: #fff;
    z-index: 50001;
    min-width: rem(200);
		opacity: 0;
		animation: change .3s;
		animation-fill-mode : forwards;
		.mess-top{
			text-align: center;
			padding: rem(30);
			padding-bottom: rem(60);
			border-bottom: rem(1) #ddd solid;
			.title {
				font-size: rem(32);
				font-weight: 600;
				margin-bottom: rem(30);
			}
			.content {
				font-size: rem(28);
				color: #484848;
				line-height: 2em;
				color: #555;
			}
			input {
				margin-top: rem(30);
				width: 80%;
				line-height: rem(60);
				text-align: center;
				font-size: rem(28);
				border-bottom: rem(1) #ddd solid;
				&:focus {
					border-color: $base-color;
				}
			}			
		}
    .btn-group {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: rem(80);
			p{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: rem(32);
				height: rem(80);
				&:nth-child(1){
					position: relative;
					&:after{
						content: '';
						position: absolute;
						top: rem(15);
						right: 0;
						width: rem(1);
						height: rem(50);
						background: #ddd;					
					}
				}
				&:active{
					opacity: .8;
				}
			}
    }
  }
}
@keyframes change{
	from{
		min-width: rem(200);
		opacity: 0;
	}
	to{
		min-width: rem(600);
		opacity: 1;
	}
}
</style>